<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<script src="./bootstrap/js/bootstrap.bundle.js"></script>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<title>个人主页</title>
	</head>
	<style type="text/css">
		.row>div {
			/* background-color: #BFE2E9; */
			border-top: 2px black solid;
		}

		#menu li {
			float: left;
			list-style: none;
			margin-left: 20px;
		}
	</style>
	<body>
		<div class="container-fluid">

			<div class="row" id="menu">
				<div class="col-3">
					logo
				</div>
				<div class="col-9">
					<ul>
						<li>首页</li>
						<li>新闻列表</li>
						<li>关于我们</li>
						<li>联系我们</li>
						<li>搜索</li>
						<li>优惠列表</li>
						<li>公司介绍</li>
					</ul>
				</div>
			</div>

			<div class="row" id="news">
				<div class=" col-sm-4  col-12">
					<fieldset id="">
						<legend>国内新闻</legend>

						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</fieldset>
				</div>
				<div class=" col-sm-4    col-12">
					<fieldset id="">
						<legend>科技新闻</legend>

						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</fieldset>
				</div>
				<div class=" col-sm-4 col-12 ">
					<fieldset id="">
						<legend>国际新闻</legend>

						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</fieldset>
				</div>
			</div>

 
			<div class="row " >
				 <nav>
				   <div class="nav nav-tabs" id="nav-tab" role="tablist">
				     <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">主页</button>
				     <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">个人资料</button>
				     <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">联系我们</button>
					 <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-guanyuwomen" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">关于我们</button>
					 <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-ceshi" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">测试</button>
				   </div>
				 </nav>
				 <div class="tab-content" id="nav-tabContent">
				   <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
					   
					   这里是主页的内容
					   
					   
				   </div>
				   <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">这里是geren ziliao 的内容</div>
				   <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">这里是联系我们的内容</div>
				    <div class="tab-pane fade" id="nav-guanyuwomen" role="tabpanel" aria-labelledby="nav-contact-tab">这里是yuanyu 我们的内容</div>
					 <div class="tab-pane fade" id="nav-ceshi" role="tabpanel" aria-labelledby="nav-contact-tab">这里是cesggg  我们的内容</div>
				 </div>

			</div>
			<div class="row  align-items-end testrow" >
				 <table class="table table-striped  table-hover">
				   <thead>
				     <tr>
				       <th scope="col">#</th>
				       <th scope="col">First</th>
				       <th scope="col">Last</th>
				       <th scope="col">Handle</th>
				     </tr>
				   </thead>
				   <tbody>
				     <tr>
				       <th scope="row">1</th>
				       <td>Mark</td>
				       <td>Otto</td>
				       <td>@mdo</td>
				     </tr>
				     <tr>
				       <th scope="row">2</th>
				       <td>Jacob</td>
				       <td>Thornton</td>
				       <td>@fat</td>
				     </tr>
				     <tr>
				       <th scope="row">3</th>
				       <td colspan="2">Larry the Bird</td>
				       <td>@twitter</td>
				     </tr>
					 <tr>
					   <th scope="row">3</th>
					   <td colspan="2">Larry the Bird</td>
					   <td>@twitter</td>
					 </tr>
					 <strong><tr>
				       <th scope="row">3</th>
				       <td colspan="2">Larry the Bird</td>
				       <td>@twitter</td>
				     </tr>
					 <tr>
					   <th scope="row">3</th>
					   <td colspan="2">Larry the Bird</td>
					   <td>@twitter</td>
					 </tr></strong>
					 
				   </tbody>
				 </table>
			</div>
			<div class="row">
				 
				
				
			</div>
			<div class="row"></div>
		</div>

		<style type="text/css">
			.testrow {
				height: 200px; 
				color: white;
			}
		</style>

	</body>
</html>
